.main-screen > .sidebar {
  @include native-sidebar;
  border-right: none;
  width: $sidebar-width;
  padding: {
    top: 50px;
    right: 0px;
    left: 0px;
    bottom: $sidebar-footer-height + 1px;
  };
  max-height: 100%;
  position: relative;
  overflow-y: hidden;

  > .resize-handler {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    width: 1px;
    border-left: 4px solid transparent;
    cursor: col-resize;

    &:before {
      content: "";
      position: absolute;
      display: block;
      background: $mac-sidebar-border-color;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  > .databases {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 3px 12px 6px;
    width: 100%;
    border-bottom: 1px solid #d1d1d1;

    select {
      width: 100%;
      border-color: #ccc;
      border-radius: 4px;
      height: 23px;
    }

    label {
      display: block;
      @include unselectable;
      margin-bottom: 1px;
      font-size: 0.9em;
    }

    span.connection-lost {
      position: absolute;
      right: 6px;
      top: 4px;
      a {
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url("icons/disconnect.png") no-repeat;
        background-size: 15px 15px;
      }
    }

    .heroku-mode {
      span, a {
        display: block;
      }
    }
  }

  > .tables-filter {
    position: relative;
    padding: 6px 0 7px;

    span.funnel-icon {
      display: block;
      height: 16px;
      width: 16px;
      position: absolute;
      background: #cecece;
      -webkit-mask-image: url(icons/funnel.svg);
      top: 11px;
      left: 19px;
    }

    input.filter-tables {
      margin: 0px 12px;
      padding: 5px 26px;
      width: calc(100% - 78px);
    }

    span.clear-filter {
      background: #7b7b7b;
      display: none;
      height: 18px;
      width: 18px;
      position: absolute;
      top: 10px;
      -webkit-mask-image: url(icons/add-circle.svg);
      right: 15px;
      transform: rotate(45deg);
      cursor: pointer;
    }

    &.has-filter-value span.clear-filter {
      display: block;
    }
  }

  > .tables {
    height: calc(100% - 36px);
    max-height: 100%;
    overflow: auto;
    position: relative;

    div.show-system-tables {
      padding-left: 5px;
      position: relative;
      height: 0;

      label {
        @include system-text;

        position: absolute;
        top: -24px;
      }
    }

    &.without-system-tables {
      > ul {
        > li {
          display: none;
        }

        > li[schema-name="public"] {
          display: block;

          > ul {
            padding-top: 3px;
          }

          > span {
            display: none;
          }
        }
      }
    }

    > ul {
      min-height: 100%;
      padding-bottom: 32px;
      box-sizing: border-box;

      > li {
        @include system-text;

        > span {
          display: block;
          background: rgba(#000, 0.1);
          font-weight: bold;

          @include system-text;

          padding: 2px 8px 2px 35px;
          position: relative;

          &:before {
            display: block;
            content: "";
            background: url("icons/orange_database.png") no-repeat;
            background-size: 15px 15px;
            width: 15px;
            height: 15px;
            left: 13px;
            top: 4px;
            position: absolute;
          }
        }

        > ul {
          display: none;
          @include native-items-list;
          > li {
            padding-left: 34px;
            &:before {
              display: block;
              content: "";
              background: url("icons/table2.png") no-repeat;
              background-size: 15px 15px;
              width: 15px;
              height: 15px;
              left: 13px;
              top: 4px;
              position: absolute;
            }

            .edit-table-field {
              font: {
                family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
                size: 13px;
              };
              width: 100%;
            }

            &[table-type="VIEW"]:before, &[table-type="MATERIALIZED VIEW"]:before {
              background-image: url("icons/db_view.png");
              opacity: 0.8;
            }

            &[table-type="FOREIGN TABLE"]:before {
              background-image: url("icons/foreign_table.png");
              opacity: 0.8;
            }

            &[table-type="SEQUENCE"]:before {
              background-image: url("icons/sequence2.png");
              opacity: 0.7;
            }
          }
        }

        &.open {
          > ul {
            display: block;
          }
        }
      }
    }
  }

  > ul.extras {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    font-size: 0;

    @include native-footer-bar($sidebar-footer-height);

    li {
      width: 24px; //$sidebar-footer-height;
      height: 22px;
      text-align: center;
      //cursor: pointer;
      font-size: 0;
      display: block;
      float: left;

      a {
        font-size: 0;
        display: inline-block;
        width: 100%;
      }

      &:hover {
        background: rgba(#000, 0.1);
      }

      &.active {
        @include gradient(rgba(#038, 0.15), rgba(#05a, 0.15));
      }
    }
  }

  > .tables, > ul.extras {
    display: none;
  }

  &.database-selected {
    > .tables, > ul.extras {
      display: block;
    }
  }
}
